<pre class='metadata'>
Title: CSS Backgrounds Module Level 4
Shortname: css-backgrounds
Level: 4
Status: FPWD
Date: 2025-11-25
Prepare for TR: yes
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-backgrounds-4/
TR: https://www.w3.org/TR/css-backgrounds-4/
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about/, w3cid 52258
Editor: Sebastian Zartner, Invited Expert, sebastianzartner@gmail.com, w3cid 64937
Former Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343
Abstract: This module contains the features of CSS relating to the backgrounds of boxes on the page.
Ignored Vars: width of background positioning area, width of background image, height of background positioning area, height of background image, X'
Ignored Terms: total width
WPT Path Prefix: css/css-backgrounds/
WPT Display: closed
</pre>

<pre class="link-defaults">
spec:css-text-4; type:value; text:collapse
spec:css-shapes-2; type:function; text:path()
spec:css-borders-4;
	type:property; text:border
	type:property; text:border-color
	type:property; text:border-image
	type:property; text:border-radius
	type:property; text:border-style
	type:property; text:border-width
	type:property; text:box-shadow
spec:css2; type:dfn; text:viewport
spec:html; type:element; text:body
spec:css3-exclusions; type:dfn; text:content area
</pre>

<link rel="stylesheet" href="style.css" />

<h2 id="intro">
Introduction</h2>

	When elements are rendered according to the
	<a href="https://www.w3.org/TR/css-box-3/#box-model">CSS box model</a> [[!CSS-BOX-3]],
	each element is either not displayed at all,
	or formatted as one or more rectangular boxes.
	Each box has a rectangular [=content area=],
	a band of [=padding=] around the content,
	a [=border=] around the padding,
	and a [=margin=] outside the border.
	(The margin may actually be negative,
	  but margins have no influence on the background and border.)

	<figure>
		<img src="images/box.png" width="458" height="278"
		     alt="Diagram of a typical box, showing the content, padding, border and margin areas"
		>

		<figcaption>
			The various areas and edges of a typical box.
			(This diagram is explained in the CSS Box Model Module [[!CSS-BOX-3]].)
		</figcaption>
	</figure>

	The properties of this module deal with the background of the [=content area|content=], [=padding area|padding=], and [=border area|border=] areas.

	If an element is broken into multiple [=box fragments=],
	'box-decoration-break' defines
	how the borders and background are divided over the various fragments.
	(An element can result in more than one fragment if it is broken
	at the end of a line, at the end of a column or at the end of a page;
	and continued in the next line, column or page.)

	The relative stacking order of backgrounds, borders, and shadows
	is given in this module.
	For how these layers interact with other rendered content,
	see Appendix E “Elaborate description of Stacking Contexts” in [[!CSS2]].

<h3 id="placement">
Module Interactions</h3>

	This specification extends the parts related to backgrounds
	of CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].

	It provides specifications for the added 'background-repeat-*' and `background-position-*' longhands,
	a new 'background-tbd' property that allows to define the background layers excluding the color,
	and adds two new values to 'background-clip'.

	All properties in this module apply to the ''::first-letter'' and ''::first-line'' [=pseudo-elements=].

<h3 id="values">
Value Definitions</h3>

	This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
	using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
	Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].
	Combination with other CSS modules may expand the definitions of these value types.
	For example, combining with <a href="https://www.w3.org/TR/css-images/">CSS Images</a>
	allows for using CSS gradients as 'background-image' or 'border-image' values.
	[[CSS-IMAGES-3]]

	In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a>CSS-wide keywords</a> as their property value.
	For readability they have not been repeated explicitly.

<h2 id="backgrounds">
Defining Backgrounds</h2>

	Each box has a background layer that may be fully transparent (the default),
	or filled with a color and/or one or more images.
	The background properties specify what color ('background-color')
	and images ('background-image') to use,
	and how they are sized, positioned, tiled, etc.

	The background properties are not inherited,
	but the parent box's background will shine through by default
	because of the initial ''transparent'' value on 'background-color'.

<h3 id="background-color" oldids="the-background-color">
Base Color: the 'background-color' property</h3>

	<pre class="propdef">
	Name: background-color
	Value: <<color>>
	Initial: transparent
	Applies to: all elements
	Inherited: no
	Percentages: N/A
	Computed value: computed color
	Animation type: by computed value
	</pre>

	<wpt>
		animations/background-color-animation-backdrop-infinite-duration-crash.html
		animations/background-color-animation-custom-property.html
		animations/background-color-animation-custom-timing-function-reverse.html
		animations/background-color-animation-custom-timing-function.html
		animations/background-color-animation-element-not-visible-at-current-viewport.html
		animations/background-color-animation-fallback-additive-keyframe.html
		animations/background-color-animation-fallback-missing-0-percent.html
		animations/background-color-animation-fallback-missing-100-percent.html
		animations/background-color-animation-fallback-replace.html
		animations/background-color-animation-field-crash.html
		animations/background-color-animation-fragmented.html
		animations/background-color-animation-half-opaque.html
		animations/background-color-animation-in-body.html
		animations/background-color-animation-non-empty-no-draw-crash.html
		animations/background-color-animation-non-zero-size-element-change-to-zero.html
		animations/background-color-animation-pseudo-element.html
		animations/background-color-animation-removed-element-crash.html
		animations/background-color-animation-single-keyframe.html
		animations/background-color-animation-three-keyframes1.html
		animations/background-color-animation-three-keyframes2.html
		animations/background-color-animation-three-keyframes3.html
		animations/background-color-animation-will-change-contents.html
		animations/background-color-animation-with-blur.html
		animations/background-color-animation-with-images.html
		animations/background-color-animation-with-mask.html
		animations/background-color-animation-with-table1.html
		animations/background-color-animation-with-table2.html
		animations/background-color-animation-with-table3.html
		animations/background-color-animation-with-table4.html
		animations/background-color-animation-with-zero-playbackRate.html
		animations/background-color-animation-zero-size-element-change-to-non-zero.html
		animations/background-color-animation-zero-size-element.html
		animations/background-color-animation.html
		animations/background-color-interpolation.html
		animations/background-color-scroll-into-viewport.html
		animations/background-color-transition-colormix.html
		animations/background-color-transition-currentcolor.html
		animations/background-color-transition.html
		animations/background-color-transparent-animation-in-body.html
		animations/invalidation/background-color-animation-with-zero-alpha.html
		animations/invalidation/background-color-transition-obscured.html
		animations/invalidation/background-color-transition-with-delay.html
		animations/invalidation/background-color-transition-with-initially-transparent.html
		animations/two-background-color-animation-diff-length1.html
		animations/two-background-color-animation-diff-length2.html
		animations/two-background-color-animation-diff-length3.html
		background-none-none-and-color.html
		background-color-body-propagation-001.html
		background-color-body-propagation-002.html
		background-color-body-propagation-003.html
		background-color-body-propagation-004.html
		background-color-body-propagation-005.html
		background-color-body-propagation-006.html
		background-color-body-propagation-007.html
		background-color-body-propagation-008.html
		background-color-body-propagation-009.html
		background-color-clip.html
		background-color-root-propagation-001.html
		background-color-root-propagation-002.html
		bg-color-with-gradient.html
		child-move-reveals-parent-background.html
		color-mix-currentcolor-background-repaint-parent.html
		color-mix-currentcolor-background-repaint.html
		hidpi/simple-bg-color.html
		inheritance.sub.html
		inline-background-rtl-001.html
		parsing/background-color-computed.html
		parsing/background-color-invalid.html
		parsing/background-color-valid.html
		color-behind-images.htm
	</wpt>

	This property sets the <dfn export id="background-color-layer">background color</dfn> of a box.
	This color is drawn behind any background images.

	<div class="example">
		Example:

		<pre>h1 { background-color: #F00 } /* Sets background to red. */</pre>
	</div>

	The [=background color=] is clipped
	according to the 'background-clip' value
	associated with the bottom-most [=background image layer=].

<h3 id="background-image" oldids="the-background-image">
Image Sources: the 'background-image' property</h3>

	<pre class="propdef">
	Name: background-image
	Value: <<bg-image>>#
	Initial: none
	Applies to: all elements
	Inherited: no
	Percentages: N/A
	Computed value: list, each item either an <<image>> or the keyword ''background-image/none''
	Animation type: discrete
	</pre>

	<wpt>
		background-image-001.html
		background-image-002.html
		background-image-003.html
		background-image-004.html
		background-image-005.html
		background-image-006.html
		background-image-007.html
		background-image-centered-with-border-radius.html
		background-image-centered.html
		background-image-cors-no-reload.html
		background-image-cover-zoomed-1.html
		background-image-first-letter.html
		background-image-first-line.html
		background-image-gradient-currentcolor-conic-repaint.html
		background-image-gradient-currentcolor-linear-repaint.html
		background-image-gradient-currentcolor-radial-repaint.html
		background-image-gradient-currentcolor-visited.html
		background-image-gradient-interpolation-repaint.html
		background-image-large-with-auto.html
		background-image-none-gradient-repaint.html
		background-image-shared-stylesheet.html
		background-image-table-cells-straddling-no-repeat.html
		background-image-table-cells-zoomed.html
		background-image-with-border-radius-fidelity.html
		animations/background-image-interpolation.html
		inheritance.sub.html
		parsing/background-image-computed.sub.html
		parsing/background-image-invalid.html
		parsing/background-image-valid.html
	</wpt>

	This property specifies the <dfn export lt="background image" local-lt="image" id="background-images">background image(s)</dfn> of an element.
	Images are drawn with the first specified one on top (closest to the user)
	and each subsequent image behind the previous one.
	The property's value is given as a comma-separated list
	of <<bg-image>> values where

	<pre class=prod><dfn><<bg-image>></dfn> = <<image>> | none</pre>

	A value of <dfn value for="background-image">none</dfn>
	counts as a [=background image layer=] but draws nothing.
	An image that is empty (zero width or zero height),
	that fails to download,
	or that cannot be displayed
	(e.g., because it is not in a supported image format)
	likewise counts as a [=layer=] but draws nothing.

	See [[#layering]] for how 'background-image' interacts
	with other comma-separated background properties
	to form each [=background image layer=].

	When setting a background image,
	authors should also specify a 'background-color'
	that will preserve contrast with the text
	for when the image is unavailable.

	For accessibility reasons,
	authors should not use background images
	as the sole method of conveying important information.
	See <a href="https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F3">Web Content Accessibility Guideline F3</a> [[WCAG20]].
	Images are not accessible in non-graphical presentations,
	and background images specifically
	might be turned off in high-contrast display modes.

	Note: Stylistic foreground images can be provided in CSS
	with the 'content' property.
	Semantically-important foreground images should be provided
	in the document markup, e.g. with the &lt;img&gt; tag in HTML.

	Note: <a href="https://www.w3.org/TR/media-frags/#naming-space">Media fragments</a>
	can be used to display a portion of an image.
	The <a href="https://www.w3.org/TR/css-images/">CSS Images</a> module
	will provide fallback syntax for image formats
	and include additional controls for image display.

	<div class="example">
		Some examples specifying background images:

		<pre>
		html { background-image: url("marble.svg") }
		p { background-image: none }
		div { background-image: url(tl.png), url(tr.png) }
		main { background-image: radial-gradient(at bottom right, transparent, white); }
		</pre>
	</div>

	Implementations may optimize
	by not downloading and drawing images that are not visible
	(e.g., because they are behind other, fully opaque images).

<h3 id="background-repeat-longhands">
Tiling Images: the 'background-repeat-x', 'background-repeat-y', 'background-repeat-block', and 'background-repeat-inline' properties</h3>

	<pre class="propdef">
		Name: background-repeat-x, background-repeat-y, background-repeat-block, background-repeat-inline
		Value: <<repetition>>#
		Initial: repeat
		Inherited: no
		Percentages: N/A
		Computed value: as specified
		Animation type: discrete
		Logical property group: background-repeat
	</pre>

	<pre class="prod">
		<dfn><<repetition>></dfn> = repeat | space | round | no-repeat
	</pre>

	<p>These properties specify whether and how background images are tiled
	along one axis after they have been
	<a href="https://www.w3.org/TR/css-backgrounds-3/#the-background-size">sized</a> and <a href="https://www.w3.org/TR/css-backgrounds-3/#the-background-position">positioned</a>.

	<dl dfn-type=value dfn-for="background-repeat-x, background-repeat-y, background-repeat-block, background-repeat-inline">
		<dt><dfn>repeat</dfn>
		<dd>
			The image is repeated in the given direction as often as needed
			to cover the [=background painting area=].

		<dt><dfn>space</dfn>
		<dd>
			The image is repeated in the given direction as often as will fit
			within the [=background positioning area=] without being
			clipped and then the repeated images are spaced out to fill the area.
			The first and last images touch the edges of the area.
			If the [=background painting area=] is larger than the background positioning area,
			then the pattern repeats to fill the background painting area.
			The value of 'background-position' for this direction is ignored,
			unless there is not enough space for two copies of the image in this direction,
			in which case only one image is placed and
			'background-position' determines its position in this direction.

		<dt><dfn>round</dfn>
		<dd>
			The image is repeated in the given direction as often as will fit
			within the [=background positioning area=].
			If it doesn't fit a whole number of times,
			it is rescaled so that it does.
			See the formula under 'background-size'.
			If the [=background painting area=] is larger than the background positioning area,
			then the pattern repeats to fill the background painting area.

		<dt><dfn>no-repeat</dfn>
		<dd>
			The image is placed once and not repeated in the given direction.
	</dl>

	<p>Unless one of the axes is set to ''no-repeat'',
	the whole background painting area will be tiled,
	i.e., not just one vertical strip and one horizontal strip.

	<div class="example">
		<p style="display:none">Example(s):

		<pre>
		body {
			background: white url("pendant.png");
			background-repeat-y: repeat;
			background-position: center;
		}
		</pre>

		<figure>
			<img src="images/bg-repeat.png" width="243" height="334"
			     alt="A centered background image, with copies repeated up and down the border, padding, and content areas."
			>

			<figcaption>
				The effect of ''repeat-y'':
				One copy of the background image is centered,
				and other copies are put above and below it
				to make a vertical band behind the element.
			</figcaption>
		</figure>
	</div>

	<p>See the section [[#layering]] for how
	'background-repeat-x',
	'background-repeat-y',
	'background-repeat-block',
	and 'background-repeat-inline'
	interact with other comma-separated background properties
	to form each background image layer.

<h3 id="background-repeat" oldids="the-background-repeat">
Tiling Images Shorthand: the 'background-repeat' property</h3>

	<pre class="propdef">
	Name: background-repeat
	Value: <<repeat-style>>#
	Initial: repeat
	Applies to: all elements
	Inherited: no
	Percentages: N/A
	Computed value: list, each item a pair of keywords, one per dimension
	Animation type: discrete
	</pre>

	<wpt>
		animations/discrete-no-interpolation.html
		background-repeat-round-1a.html
		background-repeat-round-1b.html
		background-repeat-round-1c.html
		background-repeat-round-1d.html
		background-repeat-round-1e.html
		background-repeat-round-2.html
		background-repeat-round-3.html
		background-repeat-round-4.html
		background-repeat-space-10.html
		background-repeat-space-1a.html
		background-repeat-space-1b.html
		background-repeat-space-1c.html
		background-repeat-space-2.html
		background-repeat-space-3.html
		background-repeat-space-4.html
		background-repeat-space-5.html
		background-repeat-space-6.html
		background-repeat-space-7.html
		background-repeat-space-8.html
		background-repeat-space-9.html
		background-repeat/background-repeat-no-repeat.xht
		background-repeat/background-repeat-repeat-x.xht
		background-repeat/background-repeat-repeat-y.xht
		background-repeat/background-repeat-round-roundup.xht
		background-repeat/background-repeat-round.xht
		background-repeat/background-repeat-space.xht
		background-repeat/gradient-repeat-spaced-with-borders.html
		inheritance.sub.html
		parsing/background-repeat-computed.html
		parsing/background-repeat-invalid.html
		parsing/background-repeat-valid.html
		subpixel-repeat-no-repeat-mix.html
	</wpt>

	<p>This shorthand sets the values for the
	'background-repeat-x' and 'background-repeat-y' longhand properties.

	<pre class=prod>
		<dfn><<repeat-style>></dfn> = repeat-x | repeat-y | repeat-block | repeat-inline | <<repetition>>{1,2}
	</pre>

	<p>Single values for <<repeat-style>> have the following
	meanings:

	<dl dfn-type=value dfn-for=background-repeat>
	<dt><dfn>repeat-x</dfn>
	<dd>
	Computes to ''repeat no-repeat''.

	<dt><dfn>repeat-y</dfn>
	<dd>
	Computes to ''no-repeat repeat''.

	<dt><dfn>repeat-block</dfn>
	<dd>
	Computes to ''repeat'' in the [=block axis=] and ''no-repeat'' in the [=inline axis=].

	<dt><dfn>repeat-inline</dfn>
	<dd>
	Computes to ''repeat'' in the [=inline axis=] and ''no-repeat'' in the [=block axis=].

	<dt>''background-repeat-x/repeat''
	<dd>
	Computes to ''repeat repeat''.

	<dt>''background-repeat-x/space''
	<dd>
	Computes to ''space space''

	<dt>''background-repeat-x/round''
	<dd>
	Computes to ''round round''

	<dt>''background-repeat-x/no-repeat''
	<dd>
	Computes to ''no-repeat no-repeat''
	</dl>

	<p>If a <<repeat-style>> value has two keywords,
	the first one is for the horizontal direction,
	the second for the vertical one.

	<div class="example">
		<p style="display:none">Example(s):

		<pre>
		body {
			background-image: url(dot.png) white;
			background-repeat: space;
		}
		</pre>

		<figure>
			<img src="images/bg-space.png" width="250" height="365"
			     alt="Image of an element with a dotted background"
			>

			<figcaption>
				The effect of ''background-repeat/space'':
				the image of a dot is tiled to cover the whole background
				and the images are equally spaced.
			</figcaption>
		</figure>
	</div>

	<p>See the section [[#layering]] for how 'background-repeat' interacts with other
	comma-separated background properties to form each background image
	layer.

	Issue: Should a <a href="https://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html">'background-repeat: extend'</a> be added?

<h3 id="background-attachment" oldids="the-background-attachment">
Affixing Images: the 'background-attachment' property</h3>

	<pre class="propdef">
	Name: background-attachment
	Value: <<attachment>>#
	Initial: scroll
	Applies to: all elements
	Inherited: no
	Percentages: N/A
	Computed value: list, each item the keyword as specified
	Animation type: discrete
	</pre>

	<wpt>
		animations/discrete-no-interpolation.html
		background-attachment-350.html
		background-attachment-353.html
		background-attachment-fixed-block-002.html
		background-attachment-fixed-border-radius-offset.html
		background-attachment-fixed-inline-002.html
		background-attachment-fixed-inline-scrolled.html
		background-attachment-fixed-inside-transform-1.html
		background-attachment-local-block-002.html
		background-attachment-local-hidden.html
		background-attachment-local/attachment-local-clipping-color-1.html
		background-attachment-local/attachment-local-clipping-color-2.html
		background-attachment-local/attachment-local-clipping-color-3.html
		background-attachment-local/attachment-local-clipping-color-4.html
		background-attachment-local/attachment-local-clipping-color-5.html
		background-attachment-local/attachment-local-clipping-color-6.html
		background-attachment-local/attachment-local-clipping-image-1.html
		background-attachment-local/attachment-local-clipping-image-2.html
		background-attachment-local/attachment-local-clipping-image-3.html
		background-attachment-local/attachment-local-clipping-image-4.html
		background-attachment-local/attachment-local-clipping-image-5.html
		background-attachment-local/attachment-local-clipping-image-6.html
		background-attachment-local/attachment-local-positioning-2.html
		background-attachment-local/attachment-local-positioning-3.html
		background-attachment-local/attachment-local-positioning-4.html
		background-attachment-local/attachment-local-positioning-5.html
		background-attachment-local/attachment-scroll-positioning-1.html
		background-attachment-margin-root-001.html
		background-attachment-margin-root-002.html
		inheritance.sub.html
		local-attachment-content-box-scroll.html
		parsing/background-attachment-computed.html
		parsing/background-attachment-invalid.html
		parsing/background-attachment-valid.html
		table-cell-background-local-002.html
		table-cell-background-local-003.html
		table-cell-background-local.html
	</wpt>

	If [=background images=] are specified,
	this property specifies whether they are
	fixed with regard to the [=viewport=] (''fixed'')
	or scroll along with the box (''scroll'')
	or its contents (''local'').
	The property's value is given as a comma-separated list
	of <<attachment>> keywords where

	<pre class=prod><dfn><<attachment>></dfn> = scroll | fixed | local</pre>

	<dl dfn-for=background-attachment dfn-type=value>
		<dt><dfn>fixed</dfn></dt>
			<dd>
			The background is fixed with regard to the viewport.
			In [=paged media=] where there is no viewport,
			a ''fixed'' background is fixed with respect to
			the <a href="https://www.w3.org/TR/CSS2/page.html#page-box">page box</a>
			and therefore replicated on every page.

			Note: There is only one viewport per view.
			Even if an box is a [=scroll container=],
			a ''fixed'' background doesn't move with the box.

		<dt><dfn>local</dfn></dt>
			<dd>
				The background is fixed with regard to the box's contents:
				if the box has a scrolling mechanism,
				the background scrolls with the box's contents,
				and the [=background painting area=] and [=background positioning area=]
				are relative to the [=scrollable overflow area=] of the box
				rather than to the border framing them.
				Because the [=scrollable overflow area=]
				does not include the [=border area=],
				for [=scroll containers=] the ''background-clip/border-box'' value of 'background-clip'
				may be treated the same as ''background-clip/padding-box''.

		<dt><dfn>scroll</dfn></dt>
			<dd>
				The background is fixed with regard to the box itself
				and does not scroll with its contents.
				(It is effectively attached to the box's border.)
	</dl>

	Even if the image is fixed,
	it is still only visible when it is in the [=background painting area=] of the box
	or otherwise unclipped.
	(See [[#special-backgrounds]] for the cases when
	background images are not clipped.)
	Thus, unless the image is tiled, it may be invisible.

	<div class="example">
		This example creates an infinite vertical band
		that remains “glued” to the viewport when the document is scrolled.

		<pre>
		body {
			background: red url("pendant.gif");
			background-repeat: repeat-y;
			background-attachment: fixed;
		}
		</pre>
	</div>

	Note: User agents that do not support ''fixed'' backgrounds
	(for example due to limitations of the hardware platform)
	<a href="https://www.w3.org/TR/CSS/#partial">will ignore declarations</a>
	with the keyword ''fixed''.
	For example:

	<pre class="example">
	body {
		/* For all UAs: */
		background: white url(paper.png) scroll;
		/* For UAs that do fixed backgrounds: */
		background: white url(ledger.png) fixed;
	}
	h1 {
		/* For all UAs: */
		background: silver;
		/* For UAs that do fixed backgrounds: */
		background: url(stripe.png) fixed, white url(ledger.png) fixed;
	}
	</pre>

	See [[#layering]] for how 'background-attachment' interacts
	with other comma-separated background properties
	to form each [=background image layer=].

<h3 id="background-position-longhands">
Background Positioning: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties</h3>

	Issue: This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.

	<pre class="propdef">
		Name: background-position-x
		Value: [ center | [ [ left | right | x-start | x-end ]? <<length-percentage>>? ]! ]#
		Initial: 0%
		Inherited: no
		Logical property group: background-position
		Percentages: refer to width of background positioning area <em>minus</em> width of background image
		Computed value: A list, each item consisting of: an offset given as a computed <<length-percentage>> value, plus an origin keyword
		Animation type: repeatable list
	</pre>

	This property specifies the background position's horizontal component.
	An omitted origin keyword is assumed to be ''background-position-x/left''.

	<pre class="propdef">
		Name: background-position-y
		Value: [ center | [ [ top | bottom | y-start | y-end ]? <<length-percentage>>? ]! ]#
		Initial: 0%
		Inherited: no
		Logical property group: background-position
		Percentages: refer to height of background positioning area <em>minus</em> height of background image
		Computed value: A list, each item consisting of: an offset given as a computed <<length-percentage>> value, plus an origin keyword
		Animation type: repeatable list
	</pre>

	This property specifies the background position's vertical component.
	An omitted origin keyword is assumed to be ''background-position-y/top''.

	<pre class="propdef">
		Name: background-position-inline
		Value: [ center | [ [ start | end ]? <<length-percentage>>? ]! ]#
		Initial: 0%
		Inherited: no
		Logical property group: background-position
		Percentages: refer to inline-size of background positioning area <em>minus</em> inline-size of background image
		Computed value: A list, each item consisting of: an offset given as a computed <<length-percentage>> value, plus an origin keyword
		Animation type: repeatable list
	</pre>

	This property specifies the background position's inline-axis component.
	An omitted origin keyword is assumed to be ''background-position-inline/start''.

	<pre class="propdef">
		Name: background-position-block
		Value: [ center | [ [ start | end ]? <<length-percentage>>? ]! ]#
		Initial: 0%
		Inherited: no
		Logical property group: background-position
		Percentages: refer to size of background positioning area <em>minus</em> size of background image
		Computed value: A list, each item consisting of: an offset given as a computed <<length-percentage>> value, plus an origin keyword
		Animation type: repeatable list
	</pre>

	This property specifies the background position's block-axis component.
	An omitted origin keyword is assumed to be ''background-position-block/start''.

	<dl dfn-for=background-position dfn-type=value>
		<dt><dfn><<percentage>></dfn>
		<dd>
			A percentage for the horizontal offset is relative to
			(<var>width of [=background positioning area=]</var> - <var>width of [=background image=]</var>).
			A percentage for the vertical offset is relative to
			(<var>height of [=background positioning area=]</var> - <var>height of [=background image=]</var>),
			where the size of the image is the size given by 'background-size'.

			<div class="example">
				For example, with a value pair of ''0% 0%'',
				the upper left corner of the image is aligned with
				the upper left corner of, usually, the box's [=padding edge=].
				A value pair of ''100% 100%'' places
				the lower right corner of the image
				in the lower right corner of the area.
				With a value pair of ''75% 50%'',
				the point 75% across and 50% down the image
				is to be placed at the point 75% across and 50% down the area.

				<figure>
					<img src="images/bg-pos.png" width="397" height="269"
					     alt="Diagram of image position within element"
					>
					<figcaption>
						Diagram of the meaning of ''background-position: 75% 50%''.
					</figcaption>
				</figure>
			</div>

		<dt><dfn><<length>></dfn>
		<dd>
			A length value gives a fixed length as the offset.
			For example, with a value pair of ''2cm 1cm'',
			the upper left corner of the image is placed
			2cm to the right and 1cm below
			the upper left corner of the [=background positioning area=].

		<dt><dfn>''top''</dfn>
		<dd>
			Computes to ''0%'' for the vertical position if one or two values are given,
			otherwise specifies the top edge as the origin for the next offset.

		<dt><dfn>''right''</dfn>
		<dd>
			Computes to ''100%'' for the horizontal position if one or two values are given,
			otherwise specifies the right edge as the origin for the next offset.

		<dt><dfn>''bottom''</dfn>
		<dd>
			Computes to ''100%'' for the vertical position if one or two values are given,
			otherwise specifies the bottom edge as the origin for the next offset.

		<dt><dfn>''left''</dfn>
		<dd>
			Computes to ''0%'' for the horizontal position if one or two values are given,
			otherwise specifies the left edge as the origin for the next offset.

		<dt><dfn>''center''</dfn>
		<dd>
			Computes to ''50%'' (''left 50%'') for the horizontal position
			if the horizontal position is not otherwise specified,
			or ''50%'' (''top 50%'') for the vertical position if it is.
	</dl>

	<div class="example">
		The following 'background' shorthand declarations use keywords
		to set 'background-position' to the stated percentage values.

		<pre>
		body { background: url("banner.jpeg") right top }    /* 100%   0% */
		body { background: url("banner.jpeg") top center }   /*  50%   0% */
		body { background: url("banner.jpeg") center }       /*  50%  50% */
		body { background: url("banner.jpeg") bottom }       /*  50% 100% */
		</pre>
	</div>

	<div class="example">
		In the example below, the (single) image is placed
		in the lower-right corner of the viewport.

		<pre>
		body {
			background-image: url("logo.png");
			background-attachment: fixed;
			background-position: 100% 100%;
			background-repeat: no-repeat;
		}
		</pre>
	</div>

	<div class="example">
		Background positions can also be relative to other corners than the top left.
		For example, the following puts the background image
		10px from the bottom and 3em from the right:

		<pre>background-position: right 3em bottom 10px</pre>
	</div>

	See [[#layering]] for how 'background-position' interacts
	with other comma-separated background properties
	to form each [=background image layer=].

<h3 id="background-position" oldids="the-background-position">
Background Positioning Shorthand: the 'background-position' shorthand property</h3>

	<pre class="propdef">
	Name: background-position
	Value: <<bg-position>>#
	Initial: 0% 0%
	Applies to: all elements
	Inherited: no
	Percentages: refer to size of <span class=index>background positioning area</span>
	    <em>minus</em> size of background image; see text
	Computed value: a list,
	    each item a pair of offsets (horizontal and vertical) from the top left origin,
	    each offset given as a computed <<length-percentage>> value
	Animation type: repeatable list
	</pre>

	<wpt>
		animations/background-position-interpolation.html
		animations/background-position-x-interpolation.html
		animations/background-position-y-interpolation.html
		background-position-calc-minmax-001.html
		background-position-negative-percentage-comparison-002.html
		background-position-negative-percentage-comparison.html
		background-position-three-four-values.html
		background-position-xy-three-four-values-passthru.html
		background-position/background-position-bottom-right-repeat-round.html
		background-position/background-position-right-in-body.html
		inheritance.sub.html
		parsing/background-position-computed.html
		parsing/background-position-invalid.html
		parsing/background-position-valid.html
		parsing/background-position-x-computed.html
		parsing/background-position-x-invalid.html
		parsing/background-position-x-valid.html
		parsing/background-position-y-computed.html
		parsing/background-position-y-invalid.html
		parsing/background-position-y-valid.html
	</wpt>

	If [=background images=] have been specified,
	this property specifies their initial position
	(after any <a href="#background-size">resizing</a>)
	within their corresponding [=background positioning area=].

	This property is a [=shorthand property=] that sets
	'background-position-x', 'background-position-y', 'background-position-block', and 'background-position-inline'
	in a single declaration.

	Its value is given as a comma-separated list
	of <dfn><<bg-position>></dfn> values, which are interpreted as <<position>> values
	with the resized [=background image=] as the [=alignment subject=]
	and the [=background positioning area=] as the [=alignment container=].

	Note: A pair of keywords can be reordered,
	while a combination of keyword and length or percentage cannot.
	So ''center left'' is valid while ''50% left'' is not.

	If three or four values are given,
	then each <<length-percentage>> represents an offset
	and must be preceded by a keyword,
	which specifies from which edge the offset is given.
	For example, ''background-position: bottom 10px right 20px''
	represents a ''10px'' vertical offset up from the bottom edge
	and a ''20px'' horizontal offset leftward from the right edge.
	If three values are given,
	the missing offset is assumed to be zero.

	Positive values represent an offset <em>inward</em>
	from the edge of the [=background positioning area=].
	Negative values represent an offset <em>outward</em>
	from the edge of the [=background positioning area=].

	<div class="example">
		The following declarations give the stated (horizontal, vertical)
		offsets from the top left corner:

		<pre>
		background-position: left 10px top 15px;   /* 10px, 15px */
		background-position: left      top     ;   /*  0px,  0px */
		background-position:      10px     15px;   /* 10px, 15px */
		background-position: left          15px;   /*  0px, 15px */
		background-position:      10px top     ;   /* 10px,  0px */
		background-position: left      top 15px;   /*  0px, 15px */
		background-position: left 10px top     ;   /* 10px,  0px */
		</pre>
	</div>

	<pre class=prod>
		<<bg-position>> =  <<position>> | <<position-three>>
		<dfn><<position-three>></dfn> = [
		  [ left | center | right ] && [ [ top | bottom ] <<length-percentage>> ]
		|
		  [ [ left | right ] <<length-percentage>> ] && [ top | center | bottom ]
		]
	</pre>

	The omitted <<length-percentage>> in the 'background-position'-specific
	<<position-three>> syntax variant
	defaults to ''0%''.

	Issue(9690): Specify how the [=longhand properties=] are set.

<h4 id="bg-position-serialization">
Serialization of 'background-position' values</h4>

	The [=specified value=] and [=computed value=] of the <<bg-position>> type
	serialize exactly as defined in [[CSS-VALUES-4]] for <<position>>.
	For 3-value productions
	(which are not valid in <<position>>),
	the [=specified value=] serialization
	is identical to the equivalent 4-value syntax
	except that the omitted offset remains omitted.

<h3 id='background-clip'>
Painting Area: the 'background-clip' property</h3>

	<pre class="propdef">
		Name: background-clip
		Value: <<bg-clip>>#
		Initial: border-box
		Inherited: no
		Animation type: repeatable list
	</pre>

	<wpt>
		animations/discrete-no-interpolation.html
		background-clip-001.html
		background-clip-002.html
		background-clip-003.html
		background-clip-004.html
		background-clip-005.html
		background-clip-006.html
		background-clip-007.html
		background-clip-008.html
		background-clip-009.html
		background-clip-010.html
		background-clip-color-repaint.html
		background-clip-color.html
		background-clip-content-box-001.html
		background-clip-content-box-002.html
		background-clip-padding-box-001.html
		background-clip-padding-box-with-border-radius.html
		background-clip-content-box-with-border-radius-002.html
		background-clip-content-box-with-border-radius-003.html
		background-clip-padding-box-with-border-radius-002.html
		background-clip-padding-box-with-border-radius-003.html
		background-clip/clip-border-area-background-geometry.html
		background-clip/clip-border-area-border-on-top.html
		background-clip/clip-border-area-border-image.html
		background-clip/clip-border-area-box-decoration-break.html
		background-clip/clip-border-area-multiple-backgrounds.html
		background-clip/clip-border-area-on-body-not-propagated-to-root.html
		background-clip/clip-border-area-on-body-propagated-to-root.html
		background-clip/clip-border-area-on-root.html
		background-clip/clip-border-area.html
		background-clip/clip-rounded-corner.html
		background-clip/clip-text-ellipsis.html
		background-clip/clip-text-animated-text.html
		background-clip/clip-text-dynamic-2.html
		background-clip/clip-text-flex.html
		background-clip/clip-text-multi-line.html
		background-clip/clip-text-on-body-not-propagated-to-root.html
		background-clip/clip-text-on-body-propagated-to-root.html
		background-clip/clip-text-on-root.html
		background-clip/clip-text-out-of-flow-child.html
		background-clip/clip-text-text-decorations.html
		background-clip/clip-text-text-emphasis.html
		background-clip_padding-box.html
		background-paint-order-001.html
		background-rounded-image-clip-001.html
		background-rounded-image-clip-002.html
		css3-background-clip-border-box.html
		css3-background-clip-content-box.html
		css3-background-clip-padding-box.html
		css3-background-clip.html
		inheritance.sub.html
		local-attachment-content-box-scroll.html
		parsing/background-clip-computed.html
		parsing/background-clip-invalid.html
		parsing/background-clip-valid.html
	</wpt>

	Determines the <dfn export>background painting area</dfn>,
	which determines the area within which the background is painted.
	The syntax of the property is given with

	<pre class=prod>
	<dfn>&lt;bg-clip></dfn> = <<visual-box>> | [ border-area || text ]
	</pre>

	Issue: Or should this be defining the <css>-webkit-background-clip</css> property,
	saying that all the values are identical,
	with this additional ''text'' value?

	<dl dfn-type=value dfn-for="background-clip, <bg-clip>">
		<dt><dfn><<visual-box>></dfn>
		<dd>
			The background is painted within (clipped to)
			the specified box of the element.

		<dt><dfn>text</dfn>
		<dd>
			The background is painted within (clipped to)
			the intersection of the border box
			and the geometry of the text including any decorations and <a href="https://www.w3.org/TR/css-text-decor-4/#emphasis-marks">emphasis marks</a> in the element and its [=in-flow=] and floated descendants.
			The text color has no effect on the painting of the background.

		<dt><dfn>border-area</dfn></dt>
		<dd>
			The background is clipped to the area painted by the border,
			taking 'border-width' and 'border-style' into account but ignoring any transparency introduced by 'border-color'.
		</dd>
	</dl>

	If both ''background-clip/border-area'' and ''background-clip/text'' are specified,
	the background is painted within (clipped to) the union of these two areas.

	Note: The root element has a different [=background painting area=]
	and thus the 'background-clip' property has no effect when specified on it.
	See [[#special-backgrounds]].

	Note: The background is always drawn <em>behind</em> the border, if any.
	See “Elaborate description of Stacking Contexts” in [[!CSS2]] Appendix E.

	See [[css-borders-4#corner-shaping]] for how 'border-radius' affects
	the shape of the [=background painting area=].

	See [[#layering]] for how 'background-clip' interacts
	with other comma-separated background properties
	to form each [=background image layer=].

<h3 id="background-origin" oldids="the-background-origin">
Positioning Area: the 'background-origin' property</h3>

	<pre class="propdef">
	Name: background-origin
	Value: <<visual-box>>#
	Initial: padding-box
	Applies to: all elements
	Inherited: no
	Percentages: N/A
	Computed value: list, each item a keyword as specified
	Animation type: repeatable list
	</pre>

	<wpt>
		animations/discrete-no-interpolation.html
		animations/background-position-origin-interpolation.html
		background-gradient-subpixel-fills-area.html
		background-origin-001.html
		background-origin-002.html
		background-origin-003.html
		background-origin-004.html
		background-origin-005.html
		background-origin-006.html
		background-origin-007.html
		background-origin-008.html
		background-origin/origin-border-box.html
		background-origin/origin-border-box_with_position.html
		background-origin/origin-border-box_with_radius.html
		background-origin/origin-border-box_with_size.html
		background-origin/origin-content-box.html
		background-origin/origin-content-box_with_position.html
		background-origin/origin-content-box_with_radius.html
		background-origin/origin-content-box_with_size.html
		background-origin/origin-padding-box.html
		background-origin/origin-padding-box_with_position.html
		background-origin/origin-padding-box_with_radius.html
		background-origin/origin-padding-box_with_size.html
		css3-background-origin-border-box.html
		css3-background-origin-content-box.html
		css3-background-origin-padding-box.html
		inheritance.sub.html
		parsing/background-origin-computed.html
		parsing/background-origin-invalid.html
		parsing/background-origin-valid.html
	</wpt>

	This property determines the <dfn export>background positioning area</dfn>:
	the area within which any background images are positioned.
	For elements rendered as multiple [=box fragments=]
	(e.g., inline boxes on several lines, boxes on several pages),
	specifies which boxes 'box-decoration-break' [[CSS-BREAK-3]] operates on
	to determine the background positioning area(s).

	<dl dfn-for=background-origin dfn-type=value>
		<dt><dfn>padding-box</dfn>
		<dd>
			The position is relative to the [=padding box=].
			(For single boxes ''0 0'' is the upper left corner of the padding edge,
			''100% 100%'' is the lower right corner.)
		<dt><dfn>border-box</dfn>
		<dd>
			The position is relative to the [=border box=].
		<dt><dfn>content-box</dfn>
		<dd>
			The position is relative to the [=content box=].
	</dl>

	If the 'background-attachment' value for this [=layer=] is ''fixed'',
	then this property has no effect:
	in this case the [=background positioning area=] is
	the [=initial containing block=].

	Note: If 'background-clip' is ''background-clip/padding-box'',
	'background-origin' is ''background-origin/border-box'',
	'background-position' is ''top left'' (the initial value),
	and the element has a non-zero border,
	then the top and left edges of the [=background image=] will be clipped.

	See [[#layering]] for how 'background-origin' interacts
	with other comma-separated background properties
	to form each [=background image layer=].

<h3 id="background-size" oldids="the-background-size">
Sizing Images: the 'background-size' property</h3>

	<pre class="propdef">
	Name: background-size
	Value: <<bg-size>>#
	Initial: auto
	Applies to: all elements
	Inherited: no
	Percentages: see text
	Computed value: list,
		each item a pair of sizes (one per axis)
		each represented as either a keyword or a computed <<length-percentage>> value
	Animation type: repeatable list
	</pre>

	<wpt>
		animations/background-size-interpolation.html
		background-size-001.html
		background-size-002.html
		background-size-005.html
		background-size-006.html
		background-size-007.html
		background-size-008.html
		background-size-009.html
		background-size-010.html
		background-size-011.html
		background-size-012.html
		background-size-013.html
		background-size-014.html
		background-size-015.html
		background-size-016.html
		background-size-017.html
		background-size-018.html
		background-size-019.html
		background-size-020.html
		background-size-021.html
		background-size-025.html
		background-size-026.html
		background-size-027.html
		background-size-028.html
		background-size-029.html
		background-size-030.html
		background-size-031.html
		background-size-034.html
		background-size-041.html
		background-size-042.html
		background-size-043.html
		background-size-044.html
		background-size-contain-001.html
		background-size-contain-002.html
		background-size-cover-001.html
		background-size-cover-002.html
		background-size-cover-003.html
		background-size-one-value-1x1-image.html
		background-size-percentage-root.html
		background-size-with-negative-value.html
		background-size/background-size-contain-svg-view.html
		background-size/background-size-contain.xht
		background-size/background-size-cover-contain-001.xht
		background-size/background-size-cover-contain-002.xht
		background-size/background-size-cover-svg-view.html
		background-size/background-size-cover-svg.html
		background-size/background-size-cover.xht
		background-size/background-size-near-zero-color.html
		background-size/background-size-near-zero-gradient.html
		background-size/background-size-near-zero-png.html
		background-size/background-size-near-zero-svg.html
		background-size/vector/background-size-vector-001.html
		background-size/vector/background-size-vector-002.html
		background-size/vector/background-size-vector-003.html
		background-size/vector/background-size-vector-004.html
		background-size/vector/background-size-vector-005.html
		background-size/vector/background-size-vector-006.html
		background-size/vector/background-size-vector-007.html
		background-size/vector/background-size-vector-008.html
		background-size/vector/background-size-vector-009.html
		background-size/vector/background-size-vector-010.html
		background-size/vector/background-size-vector-011.html
		background-size/vector/background-size-vector-012.html
		background-size/vector/background-size-vector-013.html
		background-size/vector/background-size-vector-014.html
		background-size/vector/background-size-vector-015.html
		background-size/vector/background-size-vector-016.html
		background-size/vector/background-size-vector-017.html
		background-size/vector/background-size-vector-018.html
		background-size/vector/background-size-vector-019.html
		background-size/vector/background-size-vector-020.html
		background-size/vector/background-size-vector-021.html
		background-size/vector/background-size-vector-022.html
		background-size/vector/background-size-vector-023.html
		background-size/vector/background-size-vector-024.html
		background-size/vector/background-size-vector-025.html
		background-size/vector/background-size-vector-026.html
		background-size/vector/background-size-vector-027.html
		background-size/vector/background-size-vector-028.html
		background-size/vector/background-size-vector-029.html
		background-size/vector/diagonal-percentage-vector-background.html
		background-size/vector/tall--auto--omitted-width-percent-height.html
		background-size/vector/tall--auto--percent-width-nonpercent-height-viewbox.html
		background-size/vector/tall--auto--percent-width-nonpercent-height.html
		background-size/vector/tall--auto--percent-width-omitted-height-viewbox.html
		background-size/vector/tall--auto--percent-width-omitted-height.html
		background-size/vector/tall--auto--percent-width-percent-height-viewbox.html
		background-size/vector/tall--auto--percent-width-percent-height.html
		background-size/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
		background-size/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html
		background-size/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html
		background-size/vector/tall--auto-32px--nonpercent-width-omitted-height.html
		background-size/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html
		background-size/vector/tall--auto-32px--nonpercent-width-percent-height.html
		background-size/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html
		background-size/vector/tall--auto-32px--omitted-width-nonpercent-height.html
		background-size/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html
		background-size/vector/tall--auto-32px--omitted-width-omitted-height.html
		background-size/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html
		background-size/vector/tall--auto-32px--omitted-width-percent-height.html
		background-size/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html
		background-size/vector/tall--auto-32px--percent-width-nonpercent-height.html
		background-size/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html
		background-size/vector/tall--auto-32px--percent-width-omitted-height.html
		background-size/vector/tall--auto-32px--percent-width-percent-height-viewbox.html
		background-size/vector/tall--auto-32px--percent-width-percent-height.html
		background-size/vector/tall--contain--height.html
		background-size/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html
		background-size/vector/tall--contain--nonpercent-width-nonpercent-height.html
		background-size/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html
		background-size/vector/tall--contain--nonpercent-width-omitted-height.html
		background-size/vector/tall--contain--nonpercent-width-percent-height-viewbox.html
		background-size/vector/tall--contain--nonpercent-width-percent-height.html
		background-size/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html
		background-size/vector/tall--contain--omitted-width-nonpercent-height.html
		background-size/vector/tall--contain--omitted-width-omitted-height-viewbox.html
		background-size/vector/tall--contain--omitted-width-omitted-height.html
		background-size/vector/tall--contain--omitted-width-percent-height-viewbox.html
		background-size/vector/tall--contain--omitted-width-percent-height.html
		background-size/vector/tall--contain--percent-width-nonpercent-height-viewbox.html
		background-size/vector/tall--contain--percent-width-nonpercent-height.html
		background-size/vector/tall--contain--percent-width-omitted-height-viewbox.html
		background-size/vector/tall--contain--percent-width-omitted-height.html
		background-size/vector/tall--contain--percent-width-percent-height-viewbox.html
		background-size/vector/tall--contain--percent-width-percent-height.html
		background-size/vector/tall--contain--width.html
		background-size/vector/tall--cover--height.html
		background-size/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html
		background-size/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html
		background-size/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html
		background-size/vector/tall--cover--nonpercent-width-nonpercent-height.html
		background-size/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html
		background-size/vector/tall--cover--nonpercent-width-omitted-height.html
		background-size/vector/tall--cover--nonpercent-width-percent-height-viewbox.html
		background-size/vector/tall--cover--nonpercent-width-percent-height.html
		background-size/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html
		background-size/vector/tall--cover--omitted-width-nonpercent-height.html
		background-size/vector/tall--cover--omitted-width-omitted-height-viewbox.html
		background-size/vector/tall--cover--omitted-width-omitted-height.html
		background-size/vector/tall--cover--omitted-width-percent-height-viewbox.html
		background-size/vector/tall--cover--omitted-width-percent-height.html
		background-size/vector/tall--cover--percent-width-nonpercent-height-viewbox.html
		background-size/vector/tall--cover--percent-width-nonpercent-height.html
		background-size/vector/tall--cover--percent-width-omitted-height-viewbox.html
		background-size/vector/tall--cover--percent-width-omitted-height.html
		background-size/vector/tall--cover--percent-width-percent-height-viewbox.html
		background-size/vector/tall--cover--percent-width-percent-height.html
		background-size/vector/tall--cover--width.html
		background-size/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html
		background-size/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html
		background-size/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html
		background-size/vector/wide--12px-auto--nonpercent-width-omitted-height.html
		background-size/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html
		background-size/vector/wide--12px-auto--nonpercent-width-percent-height.html
		background-size/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html
		background-size/vector/wide--12px-auto--omitted-width-nonpercent-height.html
		background-size/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html
		background-size/vector/wide--12px-auto--omitted-width-omitted-height.html
		background-size/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html
		background-size/vector/wide--12px-auto--omitted-width-percent-height.html
		background-size/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html
		background-size/vector/wide--12px-auto--percent-width-nonpercent-height.html
		background-size/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html
		background-size/vector/wide--12px-auto--percent-width-omitted-height.html
		background-size/vector/wide--12px-auto--percent-width-percent-height-viewbox.html
		background-size/vector/wide--12px-auto--percent-width-percent-height.html
		background-size/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html
		background-size/vector/wide--auto--nonpercent-width-nonpercent-height.html
		background-size/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html
		background-size/vector/wide--auto--nonpercent-width-omitted-height.html
		background-size/vector/wide--auto--nonpercent-width-percent-height-viewbox.html
		background-size/vector/wide--auto--nonpercent-width-percent-height.html
		background-size/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html
		background-size/vector/wide--auto--omitted-width-nonpercent-height.html
		background-size/vector/wide--auto--omitted-width-omitted-height-viewbox.html
		background-size/vector/wide--auto--omitted-width-omitted-height.html
		background-size/vector/wide--auto--omitted-width-percent-height-viewbox.html
		background-size/vector/wide--auto--omitted-width-percent-height.html
		background-size/vector/wide--auto--percent-width-nonpercent-height-viewbox.html
		background-size/vector/wide--auto--percent-width-nonpercent-height.html
		background-size/vector/wide--auto--percent-width-omitted-height-viewbox.html
		background-size/vector/wide--auto--percent-width-omitted-height.html
		background-size/vector/wide--auto--percent-width-percent-height-viewbox.html
		background-size/vector/wide--auto--percent-width-percent-height.html
		background-size/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
		background-size/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html
		background-size/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html
		background-size/vector/wide--auto-32px--nonpercent-width-omitted-height.html
		background-size/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html
		background-size/vector/wide--auto-32px--nonpercent-width-percent-height.html
		background-size/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html
		background-size/vector/wide--auto-32px--omitted-width-nonpercent-height.html
		background-size/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html
		background-size/vector/wide--auto-32px--omitted-width-omitted-height.html
		background-size/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html
		background-size/vector/wide--auto-32px--omitted-width-percent-height.html
		background-size/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html
		background-size/vector/wide--auto-32px--percent-width-nonpercent-height.html
		background-size/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html
		background-size/vector/wide--auto-32px--percent-width-omitted-height.html
		background-size/vector/wide--auto-32px--percent-width-percent-height-viewbox.html
		background-size/vector/wide--auto-32px--percent-width-percent-height.html
		background-size/vector/wide--contain--height.html
		background-size/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html
		background-size/vector/wide--contain--nonpercent-width-nonpercent-height.html
		background-size/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html
		background-size/vector/wide--contain--nonpercent-width-omitted-height.html
		background-size/vector/wide--contain--nonpercent-width-percent-height-viewbox.html
		background-size/vector/wide--contain--nonpercent-width-percent-height.html
		background-size/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html
		background-size/vector/wide--contain--omitted-width-nonpercent-height.html
		background-size/vector/wide--contain--omitted-width-omitted-height-viewbox.html
		background-size/vector/wide--contain--omitted-width-omitted-height.html
		background-size/vector/wide--contain--omitted-width-percent-height-viewbox.html
		background-size/vector/wide--contain--omitted-width-percent-height.html
		background-size/vector/wide--contain--percent-width-nonpercent-height-viewbox.html
		background-size/vector/wide--contain--percent-width-nonpercent-height.html
		background-size/vector/wide--contain--percent-width-omitted-height-viewbox.html
		background-size/vector/wide--contain--percent-width-omitted-height.html
		background-size/vector/wide--contain--percent-width-percent-height-viewbox.html
		background-size/vector/wide--contain--percent-width-percent-height.html
		background-size/vector/wide--contain--width.html
		background-size/vector/wide--cover--height.html
		background-size/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html
		background-size/vector/wide--cover--nonpercent-width-nonpercent-height.html
		background-size/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html
		background-size/vector/wide--cover--nonpercent-width-omitted-height.html
		background-size/vector/wide--cover--nonpercent-width-percent-height-viewbox.html
		background-size/vector/wide--cover--nonpercent-width-percent-height.html
		background-size/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html
		background-size/vector/wide--cover--omitted-width-nonpercent-height.html
		background-size/vector/wide--cover--omitted-width-omitted-height-viewbox.html
		background-size/vector/wide--cover--omitted-width-omitted-height.html
		background-size/vector/wide--cover--omitted-width-percent-height-viewbox.html
		background-size/vector/wide--cover--omitted-width-percent-height.html
		background-size/vector/wide--cover--percent-width-nonpercent-height-viewbox.html
		background-size/vector/wide--cover--percent-width-nonpercent-height.html
		background-size/vector/wide--cover--percent-width-omitted-height-viewbox.html
		background-size/vector/wide--cover--percent-width-omitted-height.html
		background-size/vector/wide--cover--percent-width-percent-height-viewbox.html
		background-size/vector/wide--cover--percent-width-percent-height.html
		background-size/vector/wide--cover--width.html
		background-size/vector/zero-height-ratio-5px-auto.html
		background-size/vector/zero-height-ratio-auto-5px.html
		background-size/vector/zero-height-ratio-auto-auto.html
		background-size/vector/zero-height-ratio-contain.html
		background-size/vector/zero-height-ratio-cover.html
		background-size/vector/zero-ratio-no-dimensions-5px-auto.html
		background-size/vector/zero-ratio-no-dimensions-auto-5px.html
		background-size/vector/zero-ratio-no-dimensions-auto-auto.html
		background-size/vector/zero-ratio-no-dimensions-contain.html
		background-size/vector/zero-ratio-no-dimensions-cover.html
		background-size/vector/zero-width-ratio-5px-auto.html
		background-size/vector/zero-width-ratio-auto-5px.html
		background-size/vector/zero-width-ratio-auto-auto.html
		background-size/vector/zero-width-ratio-contain.html
		background-size/vector/zero-width-ratio-cover.html
		css3-background-size-001.html
		css3-background-size-contain.html
		css3-background-size.html
		inheritance.sub.html
		subpixel-repeat-no-repeat-mix.html
		parsing/background-size-computed.html
		parsing/background-size-invalid.html
		parsing/background-size-valid.html
	</wpt>

	This property specifies the size of each [=background image=].
	The property's value is given as a comma-separated list
	of <<bg-size>> values where

	<pre class=prod><dfn><<bg-size>></dfn> = [ <<length-percentage [0,&infin;]>> | auto ]{1,2} | cover | contain</pre>

	Values have the following meanings:

	<dl dfn-for=background-size dfn-type=value>
		<dt><dfn>contain</dfn></dt>
		<dd>
			Scale the image, while preserving its [=natural aspect ratio=] (if any),
			to the largest size such that both its width and its height
			can fit inside the [=background positioning area=].

		<dt><dfn>cover</dfn></dt>
		<dd>
			Scale the image, while preserving its [=natural aspect ratio=] (if any),
			to the smallest size such that both its width and its height
			can completely cover the [=background positioning area=].

		<dt>[ <dfn><<length-percentage [0,&infin;]>></dfn>
			| <dfn>auto</dfn> ]{1,2}</dt>
		<dd>
			The first value gives the width of the corresponding image,
			the second value its height.
			If only one value is given
			the second is assumed to be ''background-size/auto''.

			A <<percentage>> is relative to the [=background positioning area=].

			An ''background-size/auto'' value for one dimension
			is resolved by using the image's [=natural aspect ratio=]
			and the size of the other dimension,
			or failing that, using the image's [=natural size=],
			or failing that, treating it as ''100%''.

			If both values are ''background-size/auto''
			then the [=natural width=] and/or [=natural height|height=] of the image
			should be used, if any,
			the missing dimension (if any) behaving as ''background-size/auto''
			as described above.
			If the image has neither [=natural size=],
			its size is determined as for ''contain''.

			Negative values are invalid.
	</dl>

	<div class="example">
		Here are some examples.
		The first example stretches the background image
		independently in both dimensions
		to completely cover the content area:

		<pre>
		div {
			background-image: url(plasma.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-origin: content-box;
		}
		</pre>

		The second example stretches the image
		so that exactly two copies fit horizontally.
		The aspect ratio is preserved:

		<pre>
		p {
			background-image: url(tubes.png);
			background-size: 50% auto;
			background-origin: border-box;
		}
		</pre>

		This example forces the background image to be 15 by 15 pixels:

		<pre>
		p {
			background-size: 15px 15px;
			background-image: url(tile.png);
		}
		</pre>

		This example uses the image's natural size.
		Note that this is the only possible behavior in CSS level&nbsp;1 and 2.

		<pre>
		body {
			background-size: auto;            /* default */
			background-image: url(flower.png);
		}
		</pre>

		The following example rounds the height of the image to 33.3%,
		up from the specified value of 30%.
		At 30%, three images would fit entirely and a fourth only partially.
		After rounding, three images fit exactly.
		The width of the image is 20% of the background positioning area width
		and is not rounded.

		<pre>
		p {
			background-image: url(chain.png);
			background-repeat: no-repeat round;
			background-size: 20% 30%;
		}
		</pre>
	</div>

	If 'background-repeat' is ''background-repeat/round''
	for one (or both) dimensions,
	there is a second step.
	The UA must scale the image in that dimension (or both dimensions)
	so that it fits a whole number of times in the [=background positioning area=].
	In the case of the width (height is analogous):

	<blockquote>
		If <var>X</var> &ne; 0 is the width of the image after step one
		and <var>W</var> is the width of the background positioning area,
		then the rounded width
		<var>X'</var> = <var>W</var> / round(<var>W</var> / <var>X</var>)
		where round() is a function that returns the nearest natural number
		(integer greater than zero).
	</blockquote>

	If 'background-repeat' is ''background-repeat/round'' for one dimension only
	and if 'background-size' is ''background-size/auto'' for the other dimension,
	then there is a third step:
	that other dimension is scaled so that the original aspect ratio is restored.

	<div class="example">
		In this example the background image is shown at its natural size:

		<pre>
		div {
			background-image: url(image1.png);
			background-repeat: repeat;         /* default */
			background-size: auto;             /* default */
		}
		</pre>

		In the following example, the background is shown with a width of
		3em and its height is scaled proportionally to keep the original
		aspect ratio:

		<pre>
		div {
			background-image: url(image2.png);
			background-repeat: repeat;         /* default */
			background-size: 3em;              /* = '3em auto' */
		}
		</pre>

		In the following example,
		the background is shown with a width of approximately 3em:
		scaled so that it fits a whole number of times in the width of the background.
		The height is scaled proportionally to keep the original aspect ratio:

		<pre>
		div {
			background-image: url(image3.png);
			background-repeat: round repeat;
			background-size: 3em auto;
		}
		</pre>

		In the following example, the background image is shown
		with a width of 3em and a height that is either
		the height corresponding to that width at the original aspect ratio
		or slightly less:

		<pre>
		div {
			background-image: url(image4.png);
			background-repeat: repeat round;
			background-size: 3em auto;
		}
		</pre>

		In the following example,
		the background image is shown with a height of approximately 4em:
		scaled slightly so that it fits a whole number of times in the background height.
		The width is the approximately the width that corresponds to
		a 4em height at the original aspect ratio:
		scaled slightly so that it fits a whole number of times
		in the background width.

		<pre>
		div {
			background-image: url(image5.png);
			background-repeat: round;
			background-size: auto 4em;
		}
		</pre>
	</div>

	If the background image's width or height resolves to zero,
	this causes the image not to be displayed.
	(The effect is the same as if it had been a transparent image.)

	See [[#layering]] for how 'background-size' interacts
	with other comma-separated background properties
	to form each [=background image layer=].

<h4 id="bg-size-serialization">
Serialization of 'background-size' values</h4>

	The [=specified value=] and [=computed value=] of the <<bg-size>> type
	always serialize as two values, even when the second value is ''background-size/auto'',
	due to the [[cssom#serializing-css-values|shortest, most backwards-compatible serialization principle]].

<h3 id='background-layers'>
Background Image Layers: the 'background-tbd' shorthand property</h3>

	<details>
		<summary>Not Ready For Implementation</summary>
		<p>
		This section is not yet ready for implementation.
		It exists in this repository to record the ideas and promote discussion.
		<p>
		Before attempting to implement anything of this section,
		please contact the CSSWG at www-style@w3.org.
	</details>

	<pre class="propdef">
		Name: background-tbd
		Value: <<bg-layer>>#
		Initial: see individual properties
		Applies to: all elements
		Inherited: no
		Percentages: see individual properties
		Computed value: see individual properties
		Animation type: see individual properties
	</pre>

	<p>The 'background-tbd' property is a [=shorthand property=]
	that sets all the same properties as the 'background' shorthand
	except for 'background-color',
	allowing authors to easily declare and position background images
	while letting 'background-color' cascade through independently.

	Issue:
		The name of this property is discussed in
		<a href="https://github.com/w3c/csswg-drafts/issues/9083">issue 9083</a>.

	<div class="example" id="background-layer-example">
		This example sets two background layers later in the cascade.
		By using 'background-tbd', the previously set 'background-color'
		won't be overridden.

		<pre class="lang-css">
		p {
			background-color: green;
		}

		p {
			background-tbd:
				url(a.png) top left,
				url(b.png) top left no-repeat;
		}
		</pre>
	</div>

	<div class="invalid example" id="invalid-background-layer-example">
		This example tries to set the background color in addition to
		the background image. But for that to work,
		'background' needs to be used instead of 'background-tbd'.
		So the 'background-tbd' declaration will be dropped.

		<pre class="lang-css">
		p {
			background: url(pass.png) green;   /* valid */
			background-tbd: url(fail.png) red; /* invalid */
		}
		</pre>
	</div>

<h3 id="background" oldids="the-background">
Backgrounds Shorthand: the 'background' property</h3>

	<pre class="propdef shorthand">
	Name: background
	Value: <<bg-layer>>#? , <<final-bg-layer>>
	Applies to: all elements
	Inherited: no
	</pre>

	<wpt>
		background-331.html
		background-332.html
		background-333.html
		background-334.html
		background-335.html
		background-336.html
		parsing/background-computed.html
		parsing/background-invalid.html
		parsing/background-shorthand-serialization.html
		parsing/background-valid.html
	</wpt>

	The 'background' property is a [=shorthand property=]
	for setting most background properties at the same place in the style sheet.
	The number of comma-separated items defines the number of [=background image layers=].
	Given a valid declaration, for each layer
	the shorthand first sets the corresponding value of each of
	'background-image',
	'background-position',
	'background-size',
	'background-repeat',
	'background-origin',
	'background-clip'
	and 'background-attachment' to
	that property's [=initial value=],
	then assigns any explicit values
	specified for this layer in the declaration.
	Finally 'background-color' is set to the specified color, if any,
	else set to its initial value.

	This property's value is given as a comma-separated list
	of values where

	<pre class=prod>
	<dfn>&lt;bg-layer></dfn> = <<bg-image>> || <<bg-position>> [ / <<bg-size>> ]? || <<repeat-style>> || <<attachment>> || <<bg-clip>> || <<visual-box>>
	<dfn>&lt;final-bg-layer></dfn> =  <<bg-image>> || <<bg-position>> [ / <<bg-size>> ]? || <<repeat-style>> || <<attachment>> || <<bg-clip>> || <<visual-box>> || <<'background-color'>></pre>

	Note: A color is permitted in <<final-bg-layer>>, but not in <<bg-layer>>.

	If one <<visual-box>> value is present,
	then it sets both 'background-origin' and 'background-clip' to that value.
	However, if a value is set that is only valid in 'background-clip',
	then it sets 'background-clip' to that value and 'background-origin' to ''background-origin/border-box''.
	If two <<visual-box>> values are present,
	then the first sets 'background-origin' and the second 'background-clip'.

	<div class="example">
		In the first rule of the following example, only a value for
		'background-color' has been given and the
		other individual properties are set to their initial values. In the
		second rule, many individual properties have been specified.

		<pre>
		body { background: red }
		p { background: url("chess.png") 40% / 10em gray
		                round fixed border-box; }
		</pre>

		The first rule is equivalent to:

		<pre>
		body {
		    background-color: red;
		    background-position: 0% 0%;
		    background-size: auto;
		    background-repeat: repeat;
		    background-clip: border-box;
		    background-origin: padding-box;
		    background-attachment: scroll;
		    background-image: none }
		</pre>

		The second is equivalent to:

		<pre>
		p {
			background-color: gray;
			background-position: 40% 50%;
			background-size: 10em auto;
			background-repeat: round;
			background-clip: border-box;
			background-origin: border-box;
			background-attachment: fixed;
			background-image: url(chess.png);
		}
		</pre>
	</div>

	<div class="example">
		The following example shows how a both
		a background color (''#CCC'') and a background image (''url(metal.jpg)'')
		are set.
		The image is rescaled to the full width of the element:

		<pre>
		E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}
		</pre>
	</div>

	<div class="example">
		Another example shows equivalence:

		<pre>
		div {
			background: padding-box url(paper.jpg) white center;
		}

		div {
			background-color: white;
			background-image: url(paper.jpg);
			background-repeat: repeat;
			background-attachment: scroll;
			background-position: center;
			background-clip: padding-box;
			background-origin: padding-box;
			background-size: auto auto;
		}
		</pre>
	</div>

	<div class="example">
		The following declaration with multiple, comma-separated values

		<pre>
		background: url(a.png) top left no-repeat,
		            url(b.png) center / 100% 100% no-repeat,
		            url(c.png) white;
		</pre>

		is equivalent to

		<pre>
		background-image:      url(a.png),  url(b.png),          url(c.png);
		background-position:   top left,    center,              top left;
		background-repeat:     no-repeat,   no-repeat,           repeat;
		background-clip:       border-box,  border-box,          border-box;
		background-origin:     padding-box, padding-box,         padding-box;
		background-size:       auto auto,   100% 100%,           auto auto;
		background-attachment: scroll,      scroll,              scroll;
		background-color:      white;
		</pre>
	</div>

<h2 id="layering">
Layering Multiple Background Images</h2>

	The background of a box can have multiple
	<dfn export lt="background image layer" local-lt="layer">background image layers</dfn>.
	The number of layers is determined by
	the number of comma-separated values in the 'background-image' property.
	Note that a value of ''background-image/none'' still creates a layer.

	<wpt>
		background-none-none-and-color.html
		order-of-images.htm
		scroll-positioned-multiple-background-images.html
	</wpt>

	Each of the [=background images=] is sized, positioned, and tiled
	according to the corresponding value in the other background properties.
	The lists are matched up from the first value:
	excess values at the end are not used.
	If a property doesn't have enough comma-separated values
	to match the number of layers,
	the [=UA=] must calculate its [=used value=]
	by repeating the list of values until there are enough.

	<div class="example">
		For example, this set of declarations:

		<pre>
		background-image: url(flower.png), url(ball.png), url(grass.png);
		background-position: center center, 20% 80%, top left, bottom right;
		background-origin: border-box, content-box;
		background-repeat: no-repeat;
		</pre>

		has exactly the same effect as this set,
		with the extra position dropped
		and the missing values for 'background-origin' and 'background-repeat'
		filled in (emphasized for clarity):

		<pre>
		background-image: url(flower.png), url(ball.png), url(grass.png);
		background-position: center center, 20% 80%, top left;
		background-origin: border-box, content-box<strong>, border-box</strong>;
		background-repeat: no-repeat<strong>, no-repeat, no-repeat</strong>;
		</pre>
	</div>

	The first image in the list is the [=layer=] closest to the user,
	the next one is painted behind the first, and so on.
	The background color, if present,
	is painted below all of the other [=layers=].

	Note: The [[css-borders-4#border-images|border-image properties]]
	can also define a background image,
	which, if present, is painted on top of
	the background [=layers=] created by the background properties.

<h2 id="special-backgrounds">
Backgrounds of Special Elements</h2>

	The document <a href="https://www.w3.org/TR/CSS2/intro.html#the-canvas">canvas</a>
	is the infinite surface over which the document is rendered. [[!CSS2]]
	Since no element corresponds to the canvas,
	in order to allow styling of the canvas
	CSS propagates the background of the [=root element=]
	(or, in the case of HTML, the &lt;body&gt; element)
	as described below.
	However, if the element whose background would be used for the canvas
	is ''display: none'',
	then the [=canvas background=] is transparent.

	If the [=canvas background=] is not opaque,
	the <dfn export>canvas surface</dfn> below it shows through.
	The texture of the [=canvas surface=] is UA-dependent
	(but is typically an opaque white).

<h3 id="root-background">
The Canvas Background and the Root Element</h3>

	The background of the [=root element=] becomes the <dfn export>canvas background</dfn>
	and its [=background painting area=] extends
	to cover the entire <a href="https://www.w3.org/TR/CSS2/intro.html#the-canvas">canvas</a>.
	However, any images are sized and positioned relative to the root element’s box
	as if they were painted for that element alone.
	(In other words, the
	<a href="#background-positioning-area">background <em>positioning</em> area</a>
	is determined as for the root element.)
	The root element does not paint this background again,
	i.e., the [=used value=] of its background is ''transparent''.

	<wpt>
		background-margin-iframe-root.html
		background-margin-root.html
		background-margin-transformed-root.html
		background-margin-will-change-root.html
	</wpt>

<h3 id="body-background">
The Canvas Background and the HTML &lt;body&gt; Element</h3>

	For documents whose root element is
	an HTML <code class="html">HTML</code> element
	or an XHTML <code class="html">html</code> element [[!HTML]]:
	if the [=computed value=] of 'background-image' on the [=root element=]
	is ''background-image/none'' and its 'background-color' is ''transparent'',
	user agents must instead propagate
	the [=computed values=] of the background properties
	from that element's first
	HTML <code class="html">BODY</code> or XHTML <code class="html">body</code>
	child element.
	The [=used values=]
	of that <code class="html">BODY</code> element's background properties
	are their [=initial values=],
	and the propagated values are treated
	as if they were specified on the root element.
	It is recommended that authors of HTML documents specify the canvas background
	using the <code class=html>BODY</code> element
	rather than the <code class=html>HTML</code> element.

	<wpt>
		document-canvas-remove-body.html
	</wpt>

	Note: Using [=containment=] disables
	this special handling of the HTML <{body}> element.
	See the [[CSS-CONTAIN-1#contain-property]] for details.

	<div class="example">
		According to these rules, the canvas underlying the following HTML document
		will have a “marble” background:

		<pre>
		&lt;!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
		  &gt;
		&lt;html&gt;
		  &lt;head&gt;
		    &lt;title&gt;Setting the canvas background&lt;/title&gt;
		    &lt;style type="text/css"&gt;
		       body { background: url("http://example.org/marble.png") }
		    &lt;/style&gt;
		  &lt;/head&gt;
		  &lt;body&gt;
		    &lt;p&gt;My background is marble.&lt;/p&gt;
		  &lt;/body&gt;
		&lt;/html&gt;
		</pre>
	</div>

<h3 id="first-line-background">
The ''::first-line'' Pseudo-element‘s Background</h3>

	The ''::first-line'' pseudo-element
	is like an inline-level element
	for the purposes of the background
	(see section 5.12.1 of [[!CSS2]]).
	That means, e.g., that in a left-justified first line,
	the background does not necessarily extend
	all the way to the right edge.

	<wpt>
		linear-gradient-currentcolor-first-line.html
	</wpt>

<h2 id="changes">
Changes</h2>

<h3 id="level-changes">
Additions since [[CSS3BG]]</h3>

	* turned 'background-position' into a shorthand and added physical and logical longhands
	* added logical keywords to <<bg-position>>
	* added ''background-clip/border-area'' and ''background-clip/text'' values to 'background-clip'
	* added 'background-tbd'
	* added 'background-repeat-*' longhands
	* added logical keywords ''background-repeat/repeat-block'' and ''background-repeat/repeat-inline'' to 'background-repeat'

<h2 id="acknowledgments">
Acknowledgments</h2>

	<p>In addition to the many contributors to the [[CSS1]], [[CSS2]],
	and [[CSS3BG]] predecessors to this module,
	the editors would like to thank
	Tab Atkins,
	and Håkon Wium Lie
	for their suggestions and feedback specifically for this Level 4.

<h2 class=no-num id=privacy>Privacy Considerations</h2>

No new privacy considerations have been reported on this specification.

<h2 class=no-num id=security>Security Considerations</h2>

No new security considerations have been reported on this specification.

<wpt hidden title="visual tests">
	background-color-applied-to-rounded-inline-element.htm
	background-color-border-box.htm
	background_color_padding_box.htm
	background-repeat-round-001.html
	background-repeat-round-002.html
	background-repeat-space-padding-box.htm
	background_repeat_space_border_box.htm
	background_repeat_space_content_box.htm
	background-attachment-fixed.html
	background-attachment-local-inline-002.html
	background-attachment-local-scrolling.htm
	background-attachment-local.html
	background-clip-root.html
	background-clip/clip-border-box.html
	background-clip/clip-border-box_with_position.html
	background-clip/clip-border-box_with_radius.html
	background-clip/clip-border-box_with_size.html
	background-clip/clip-content-box.html
	background-clip/clip-content-box_with_position.html
	background-clip/clip-content-box_with_radius.html
	background-clip/clip-content-box_with_size.html
	background-clip/clip-padding-box.html
	background-clip/clip-padding-box_with_position.html
	background-clip/clip-padding-box_with_radius.html
	background-clip/clip-padding-box_with_size.html
	background-clip-content-box.html
	background-size-003.html
	background-size-022.html
	background-size-023.html
	background-size-024.html
	background-size-032.html
	background-size-033.html
	background-size-applies-to-block.htm
	background-size-aspect-ratio.htm
	border-color_transparent.html
	ttwf-css3background-border-color-shorthand-missing-bottom.htm
	ttwf-css3background-border-color-shorthand-missing-left.htm
	ttwf-css3background-border-color-shorthand-missing-right.htm
	ttwf-css3background-border-color-shorthand.htm
	ttwf-css3background-border-color.htm
	ttwf-css3background-border-style-double.htm
	ttwf-css3background-border-style-shorthand-missing-bottom.htm
	ttwf-css3background-border-style-shorthand-missing-left.htm
	ttwf-css3background-border-style-shorthand.htm
	ttwf-css3background-border-style-values.htm
	ttwf-css3background-border-style.htm
	border-bottom-left-radius-002.xht
	border-bottom-left-radius-012.xht
	border-bottom-left-radius-013.xht
	border-bottom-right-radius-002.xht
	border-bottom-right-radius-012.xht
	border-bottom-right-radius-013.xht
	border-radius-applies-to-001.htm
	border-radius-applies-to-002.htm
	border-radius-applies-to-003.htm
	border-radius-applies-to-004.htm
	border-radius-applies-to-005.htm
	border-radius-applies-to-006.htm
	border-radius-applies-to-007.htm
	border-radius-applies-to-008.htm
	border-radius-applies-to-009.htm
	border-radius-applies-to-010.htm
	border-radius-applies-to-011.htm
	border-radius-applies-to-012.htm
	border-radius-applies-to-013.htm
	border-radius-applies-to-014.htm
	border-radius-applies-to-015.htm
	border-radius-applies-to-016.htm
	border-radius-applies-to-017.htm
	border-radius-content-edge-001.htm
	border-radius-different-width-001.htm
	border-radius-initial-value-001.htm
	border-radius-not-inherited-001.htm
	border-radius-overflow-hidden.html
	border-radius-shorthand-001.htm
	border-radius-style-001.htm
	border-radius-style-002.htm
	border-radius-style-003.htm
	border-radius-style-004.htm
	border-radius-style-005.htm
	border-radius-sum-of-radii-001.htm
	border-radius-sum-of-radii-002.htm
	border-radius-with-three-values-001.htm
	border-radius-with-two-values-001.htm
	border-top-left-radius-002.xht
	border-top-left-radius-012.xht
	border-top-left-radius-013.xht
	border-top-left-radius-values-001.htm
	border-top-left-radius-values-002.htm
	border-top-left-radius-values-003.htm
	border-top-left-radius-values-004.htm
	border-top-right-radius-002.xht
	border-top-right-radius-012.xht
	border-top-right-radius-013.xht
	border-top-right-radius-values-004.htm
	border-image-outset-001.htm
	border-image-outset-002.htm
	border-images.html
	box-shadow-001.htm
	box-shadow-002.htm
	box-shadow-003.htm
	box-shadow-004.htm
	box-shadow/box-shadow-blur-definition-001.xht
	background_properties_greater_than_images.htm
	none-as-image-layer.htm
</wpt>

<wpt hidden title="crashes">
	tiny-foreignObject-double-border-radius-crash.html
	gradient-wrong-interpolation-crash.html
	linear-gradient-calc-crash.html
</wpt>

<wpt hidden title="not actually testing CSS Backgrounds, why are they here?">
	background-gradient-interpolation-001.html
	background-gradient-interpolation-002.html
	background-gradient-interpolation-003.html
	color-mix-currentcolor-outline-repaint-parent.html
	color-mix-currentcolor-outline-repaint.html
	first-letter-space-not-selected.html
</wpt>

<wpt hidden title="CSS Borders tests">
	animations/border-bottom-left-radius-composition.html
	animations/border-bottom-right-radius-composition.html
	animations/border-bottom-width-composition.html
	animations/border-color-interpolation.html
	animations/border-image-outset-composition.html
	animations/border-image-outset-interpolation.html
	animations/border-image-slice-composition.html
	animations/border-image-slice-interpolation-stability.html
	animations/border-image-slice-interpolation.html
	animations/border-image-source-interpolation.html
	animations/border-image-width-composition.html
	animations/border-image-width-interpolation.html
	animations/border-left-width-composition.html
	animations/border-radius-interpolation.html
	animations/border-right-width-composition.html
	animations/border-top-left-radius-composition.html
	animations/border-top-right-radius-composition.html
	animations/border-top-width-composition.html
	animations/border-width-interpolation.html
	animations/box-shadow-composition.html
	animations/box-shadow-interpolation.html
	border-bottom-left-radius-001.xht
	border-bottom-left-radius-004.xht
	border-bottom-left-radius-005.xht
	border-bottom-left-radius-010.xht
	border-bottom-left-radius-011.xht
	border-bottom-left-radius-014.xht
	border-bottom-right-radius-001.xht
	border-bottom-right-radius-004.xht
	border-bottom-right-radius-005.xht
	border-bottom-right-radius-010.xht
	border-bottom-right-radius-011.xht
	border-bottom-right-radius-014.xht
	border-bottom-width-medium.html
	border-bottom-width-thick.html
	border-bottom-width-thin.html
	border-image-002.html
	border-image-003.html
	border-image-004.html
	border-image-006.html
	border-image-007.html
	border-image-011.html
	border-image-012.html
	border-image-013.html
	border-image-017.xht
	border-image-018.xht
	border-image-019.xht
	border-image-020.xht
	border-image-021.html
	border-image-calc.html
	border-image-displayed-with-transparent-border-color.html
	border-image-image-type-001.htm
	border-image-image-type-002.htm
	border-image-image-type-003.htm
	border-image-image-type-004.htm
	border-image-image-type-005.htm
	border-image-outset-003.html
	border-image-outset-004.html
	border-image-repeat-002.htm
	border-image-repeat-004.htm
	border-image-repeat-005.html
	border-image-repeat-1.html
	border-image-repeat-repeat-001.html
	border-image-repeat-round-003.html
	border-image-repeat-round-1.html
	border-image-repeat-round-2.html
	border-image-repeat-round-stretch-001.html
	border-image-repeat-round.html
	border-image-repeat-space-011.html
	border-image-repeat-space-1.html
	border-image-repeat-space-10.html
	border-image-repeat-space-2.html
	border-image-repeat-space-3.html
	border-image-repeat-space-4-ref-1.html
	border-image-repeat-space-4.html
	border-image-repeat-space-5-ref-1.html
	border-image-repeat-space-5.html
	border-image-repeat-space-6.html
	border-image-repeat-space-7.html
	border-image-repeat-space-8.html
	border-image-repeat-space-9.html
	border-image-repeat-stretch-round-001.html
	border-image-repeat_repeatnegx_none_50px.html
	border-image-round-and-stretch.html
	border-image-shorthand-001.htm
	border-image-shorthand-002.htm
	border-image-shorthand-003.htm
	border-image-slice-001.xht
	border-image-slice-002.xht
	border-image-slice-003.xht
	border-image-slice-004.htm
	border-image-slice-005.htm
	border-image-slice-006.htm
	border-image-slice-007.htm
	border-image-slice-fill-001.html
	border-image-slice-fill-002.html
	border-image-slice-fill-003.html
	border-image-slice-percentage.html
	border-image-slice-shorthand-reset.html
	border-image-space-001.html
	border-image-width-001.htm
	border-image-width-005.xht
	border-image-width-006.xht
	border-image-width-007.xht
	border-image-width-008.html
	border-image-width-009.html
	border-image-width-should-extend-to-padding.html
	border-left-width-medium.html
	border-left-width-thick.html
	border-left-width-thin.html
	border-radius-001.xht
	border-radius-002.xht
	border-radius-003.xht
	border-radius-004.xht
	border-radius-005.xht
	border-radius-006.xht
	border-radius-007.xht
	border-radius-008.xht
	border-radius-009.xht
	border-radius-010.xht
	border-radius-011.xht
	border-radius-012.html
	border-radius-013.html
	border-radius-clip-001.html
	border-radius-clip-002.htm
	border-radius-clipping-002.html
	border-radius-clipping-with-transform-001.html
	border-radius-css-text.html
	border-radius-dynamic-from-no-radius.html
	border-radius-horizontal-value-is-zero.html
	border-radius-shorthand-002.html
	border-right-width-medium.html
	border-right-width-thick.html
	border-right-width-thin.html
	border-top-left-radius-001.xht
	border-top-left-radius-004.xht
	border-top-left-radius-005.xht
	border-top-left-radius-010.xht
	border-top-left-radius-011.xht
	border-top-left-radius-014.xht
	border-top-right-radius-001.xht
	border-top-right-radius-004.xht
	border-top-right-radius-005.xht
	border-top-right-radius-010.xht
	border-top-right-radius-011.xht
	border-top-right-radius-014.xht
	border-top-width-medium.html
	border-top-width-thick.html
	border-top-width-thin.html
	border-width-cssom.html
	border-width-pixel-snapping-001-a.html
	border-width-pixel-snapping-001-b.html
	border-width-small-values-001-a.html
	border-width-small-values-001-b.html
	border-width-small-values-001-c.html
	border-width-small-values-001-d.html
	border-width-small-values-001-e.html
	box-shadow-005.html
	box-shadow-029.html
	box-shadow-039.html
	box-shadow-040.html
	box-shadow-041.html
	box-shadow-042.html
	box-shadow-body.html
	box-shadow-border-radius-001.html
	box-shadow-calc.html
	box-shadow-currentcolor.html
	box-shadow-inset-without-border-radius.html
	box-shadow-invalid-001.html
	box-shadow-multiple-001.html
	box-shadow-outset-without-border-radius-001.html
	box-shadow-overlapping-001.html
	box-shadow-overlapping-002.html
	box-shadow-overlapping-003.html
	box-shadow-overlapping-004.html
	box-shadow-radius-000.html
	box-shadow-radius-001.html
	box-shadow-radius-generated.html
	box-shadow-table-border-collapse-001.html
	box-shadow/slice-block-fragmentation-001.html
	box-shadow/slice-block-fragmentation-002.html
	box-shadow/slice-block-fragmentation-003.html
	box-shadow/slice-inline-fragmentation-001.html
	box-shadow/slice-inline-fragmentation-002.html
	box-shadow/slice-inline-fragmentation-003.html
	color-mix-currentcolor-border-repaint.html
	color-mix-currentcolor-border-repaint-parent.html
	css-border-radius-001.html
	css-box-shadow-001.html
	css3-border-image-repeat-repeat.html
	css3-border-image-repeat-stretch.html
	css3-border-image-source.html
	css3-box-shadow.html
	currentcolor-border-repaint-parent.html
	fieldset-inset-shadow.html
	inner-border-non-renderable.html
	inset-box-shadow-scroll.html
	inset-box-shadow-stacking-context-scroll.html
	parsing/border-color-computed.html
	parsing/border-color-invalid.html
	parsing/border-color-shorthand.html
	parsing/border-color-valid.html
	parsing/border-image-invalid.html
	parsing/border-image-outset-computed.html
	parsing/border-image-outset-invalid.html
	parsing/border-image-outset-valid.html
	parsing/border-image-repeat-computed.html
	parsing/border-image-repeat-invalid.html
	parsing/border-image-repeat-valid.html
	parsing/border-image-shorthand.sub.html
	parsing/border-image-slice-computed.html
	parsing/border-image-slice-invalid.html
	parsing/border-image-slice-valid.html
	parsing/border-image-source-computed.sub.html
	parsing/border-image-source-invalid.html
	parsing/border-image-source-valid.html
	parsing/border-image-valid.html
	parsing/border-image-width-computed.html
	parsing/border-image-width-invalid.html
	parsing/border-image-width-valid.html
	parsing/border-invalid.html
	parsing/border-radius-computed.html
	parsing/border-radius-invalid.html
	parsing/border-radius-valid.html
	parsing/border-shorthand.html
	parsing/border-style-computed.html
	parsing/border-style-invalid.html
	parsing/border-style-shorthand.html
	parsing/border-style-valid.html
	parsing/border-valid.html
	parsing/border-width-computed.html
	parsing/border-width-invalid.html
	parsing/border-width-shorthand.html
	parsing/border-width-valid.html
	parsing/box-shadow-computed.html
	parsing/box-shadow-invalid.html
	parsing/box-shadow-valid.html
	parsing/webkit-border-radius-valid.html
	ttwf-reftest-borderRadius.html
</wpt>